<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload  // 将 reload 方法注入到所有子组件
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    //reload()方法就是快速地把开关关掉又打开：动作太快了，看起来就像页面刷新了一样
    reload() {
      this.isRouterAlive = false // 销毁当前路由组件
      //确保 DOM 更新循环结束后再执行重建，避免异步渲染问题
      this.$nextTick(function () {
        this.isRouterAlive = true // 下一帧重建组件
      })
    }
  }
}
</script>

<style>

</style>
